<template>
	<view class="container">
		<!-- 状态头部 -->
		<view class="status-header">
			<view class="status-badge" :class="getStatusClass(detail.status)">
				<text class="status-icon">{{ getStatusIcon(detail.status) }}</text>
				<text class="status-text">{{ detail.status }}</text>
			</view>
			<view class="publish-time">
				<text class="time-label">发布于</text>
				<text class="time-value">{{ formatTime(detail.createTime) }}</text>
			</view>
		</view>

		<!-- 主要信息卡片 -->
		<view class="info-card">
			<view class="card-title-bar">
				<text class="card-title">需求信息</text>
				<view class="subject-tag">{{ detail.subject }}</view>
			</view>

			<view class="info-list">
				<view class="info-item">
					<view class="item-label">
						<text class="label-icon">📍</text>
						<text class="label-text">家教区域</text>
					</view>
					<text class="item-value">{{ detail.area }}</text>
				</view>

				<view class="info-item">
					<view class="item-label">
						<text class="label-icon">🏠</text>
						<text class="label-text">小区街道</text>
					</view>
					<text class="item-value">{{ detail.detailedAddress }}</text>
				</view>

				<view class="info-item">
					<view class="item-label">
						<text class="label-icon">📚</text>
						<text class="label-text">家教方式</text>
					</view>
					<text class="item-value">{{ detail.teachingMethod }}</text>
				</view>

				<view class="info-item">
					<view class="item-label">
						<text class="label-icon">💰</text>
						<text class="label-text">家教薪酬</text>
					</view>
					<text class="item-value price">{{ detail.salary }}</text>
				</view>

				<view class="info-item">
					<view class="item-label">
						<text class="label-icon">📞</text>
						<text class="label-text">联系电话</text>
					</view>
					<text class="item-value">{{ detail.phone }}</text>
				</view>
			</view>
		</view>

		<!-- 详细需求卡片 -->
		<view class="detail-card">
			<view class="card-title-bar">
				<text class="card-title">详细需求</text>
			</view>

			<view class="detail-section">
				<text class="section-label">学员概况</text>
				<view class="section-content">
					<text class="content-text">{{ detail.studentSituation }}</text>
				</view>
			</view>

			<view class="detail-section">
				<text class="section-label">教员要求</text>
				<view class="section-content">
					<text class="content-text">{{ detail.teacherRequirements }}</text>
				</view>
			</view>

			<view class="detail-section">
				<text class="section-label">课时安排</text>
				<view class="section-content">
					<text class="content-text">{{ detail.classTimeArrangement }}</text>
				</view>
			</view>
		</view>

		<!-- 数据统计卡片 -->
		<view class="stats-card">
			<view class="card-title-bar">
				<text class="card-title">数据统计</text>
			</view>

			<view class="stats-grid">
				<view class="stat-box">
					<text class="stat-number">{{ detail.viewCount || 0 }}</text>
					<text class="stat-label">浏览量</text>
				</view>
				<view class="stat-box">
					<text class="stat-number">{{ detail.applyCount || 0 }}</text>
					<text class="stat-label">应聘人数</text>
				</view>
				<view class="stat-box" v-if="detail.matchedTeacher">
					<text class="stat-number">✓</text>
					<text class="stat-label">{{ detail.matchedTeacher }}</text>
				</view>
			</view>
		</view>

		<!-- 应聘老师列表 -->
		<view class="apply-list-card" v-if="detail.applyCount > 0">
			<view class="card-title-bar">
				<text class="card-title">应聘老师</text>
				<text class="apply-count">{{ detail.applyCount }}人应聘</text>
			</view>

			<view class="teacher-list">
				<view class="teacher-item" v-for="(teacher, index) in applyTeachers" :key="index">
					<image class="teacher-avatar" :src="teacher.avatar" mode="aspectFill"></image>
					<view class="teacher-info">
						<text class="teacher-name">{{ teacher.name }}</text>
						<text class="teacher-tags">{{ teacher.role }} · {{ teacher.university }}</text>
					</view>
					<view class="teacher-actions">
						<view class="action-btn primary-btn" @click="viewTeacherProfile(teacher)">
							<text class="btn-text">查看</text>
						</view>
						<view class="action-btn accept-btn" @click="acceptTeacher(teacher)"
							v-if="detail.status === '待匹配'">
							<text class="btn-text">接受</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部操作按钮 -->
		<view class="bottom-actions">
			<view class="action-buttons">
				<view class="custom-btn primary-btn" @click="editPublish">
					<text class="iconfont-v2 icon-bianji btn-icon"></text>
					<text class="btn-text">编辑需求</text>
				</view>
				<view class="custom-btn danger-btn" @click="closePublish" v-if="detail.status === '待匹配'">
					<text class="iconfont-v2 icon-guanbi btn-icon"></text>
					<text class="btn-text">关闭需求</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 我发布的家教详情页面
	 * 展示发布需求的完整信息和应聘情况
	 */
	import * as api from '@/api/family'
	export default {
		name: 'MyPublishDetailPage',
		data() {
			return {
				orderId: '',
				detail: {
					orderId: '',
					phone: '',
					area: '',
					street: '',
					teachingMethod: '',
					subject: '',
					salary: '',
					studentProfile: '',
					teacherRequirements: '',
					classSchedule: '',
					status: '',
					submitTime: '',
					viewCount: 0,
					applyCount: 0,
					matchedTeacher: '',
					matchedTime: ''
				},
				// 模拟应聘老师列表
				applyTeachers: [{
						id: 1,
						name: '王老师',
						role: '大学生教员',
						university: '南昌大学',
						avatar: 'https://www.jz.nl9555.com/aunt.png'
					},
					{
						id: 2,
						name: '李老师',
						role: '专职老师',
						university: '江西师范大学',
						avatar: 'https://www.jz.nl9555.com/aunt.png'
					},
					{
						id: 3,
						name: '张老师',
						role: '在职教师',
						university: '重点中学',
						avatar: 'https://www.jz.nl9555.com/aunt.png'
					},
					{
						id: 4,
						name: '刘老师',
						role: '研究生教员',
						university: '清华大学',
						avatar: 'https://www.jz.nl9555.com/aunt.png'
					},
					{
						id: 5,
						name: '陈老师',
						role: '大学生教员',
						university: '江西财经大学',
						avatar: 'https://www.jz.nl9555.com/aunt.png'
					}]
			}
		},
		onLoad(options) {
			if (options.orderId) {
				this.orderId = options.orderId;
				this.loadPublishDetail(options.orderId);
			}
		},
		methods: {
			/**
			 * 加载发布详情
			 */
			async loadPublishDetail(orderId) {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});

				try {
					// 从JSON文件加载数据
					api.getOrderDetailApi(orderId).then(res=>{
						uni.hideLoading()
						this.detail = res.data
						
						if(this.detail.status == 0 || this.detail.status == 1 ){
							this.detail.status = "待匹配"
						}
						if(this.detail.status == 2  ){
							this.detail.status = "已匹配"
						}
						if(this.detail.status == 6  ){
							this.detail.status = "已关闭"
						}
						
						if(this.detail.teachingMethod == 1 ){
							this.detail.teachingMethod = "线下"
						}
						if(this.detail.teachingMethod == 2  ){
							this.detail.teachingMethod = "线上"
						}
						if(this.detail.teachingMethod == 3  ){
							this.detail.teachingMethod = "机构授课"
						}
						if(this.detail.teachingMethod == 4  ){
							this.detail.teachingMethod = "混合模式"
						}
					})
				} catch (error) {
					uni.hideLoading();
					console.error('加载详情异常:', error);
				}
			},

			/**
			 * 生成模拟的应聘老师列表
			 */
			generateApplyTeachers(count) {
				const teachers = [{
						id: 1,
						name: '王老师',
						role: '大学生教员',
						university: '南昌大学',
						avatar: 'https://www.jz.nl9555.com/aunt.png'
					},
					{
						id: 2,
						name: '李老师',
						role: '专职老师',
						university: '江西师范大学',
						avatar: 'https://www.jz.nl9555.com/aunt.png'
					},
					{
						id: 3,
						name: '张老师',
						role: '在职教师',
						university: '重点中学',
						avatar: 'https://www.jz.nl9555.com/aunt.png'
					},
					{
						id: 4,
						name: '刘老师',
						role: '研究生教员',
						university: '清华大学',
						avatar: 'https://www.jz.nl9555.com/aunt.png'
					},
					{
						id: 5,
						name: '陈老师',
						role: '大学生教员',
						university: '江西财经大学',
						avatar: 'https://www.jz.nl9555.com/aunt.png'
					}
				];

				this.applyTeachers = teachers.slice(0, Math.min(count, 5));
			},

			/**
			 * 格式化时间
			 */
			formatTime(timeStr) {
				if (!timeStr) return '';
				const date = new Date(timeStr);
				return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
			},

			/**
			 * 获取状态样式类
			 */
			getStatusClass(status) {
				const statusMap = {
					'pending': 'status-pending',
					'待匹配': 'status-pending',
					'matched': 'status-matched',
					'已匹配': 'status-matched',
					'closed': 'status-closed',
					'已关闭': 'status-closed'
				};
				return statusMap[status] || 'status-pending';
			},

			/**
			 * 获取状态图标
			 */
			getStatusIcon(status) {
				const iconMap = {
					'pending': '⏳',
					'待匹配': '⏳',
					'matched': '✓',
					'已匹配': '✓',
					'closed': '✕',
					'已关闭': '✕'
				};
				return iconMap[status] || '⏳';
			},

			/**
			 * 查看老师资料
			 */
			viewTeacherProfile(teacher) {
				uni.navigateTo({
					url: `/pages/jiajiao/teacher-detail?id=${teacher.id}`
				});
			},

			/**
			 * 接受老师
			 */
			acceptTeacher(teacher) {
				uni.showModal({
					title: '确认接受',
					content: `确定要接受${teacher.name}的应聘吗？`,
					success: (res) => {
						if (res.confirm) {
							this.detail.status = '已匹配';
							this.detail.matchedTeacher = teacher.name;
							this.detail.matchedTime = new Date().toISOString();

							uni.showToast({
								title: '已接受该老师',
								icon: 'success',
								duration: 2000
							});
						}
					}
				});
			},

			/**
			 * 编辑发布
			 */
			editPublish() {
				uni.showToast({
					title: '编辑功能开发中',
					icon: 'none'
				});
			},

			/**
			 * 关闭需求
			 */
			closePublish() {
				uni.showModal({
					title: '确认关闭',
					content: '关闭后将不再接收新的应聘，确定要关闭吗？',
					success: (res) => {
						if (res.confirm) {
							this.detail.status = '已关闭';
							uni.showToast({
								title: '已关闭需求',
								icon: 'success',
								duration: 2000
							});
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/uni.scss";

	.container {
		min-height: 100vh;
		background: #f5f5f5;
		padding-bottom: 120rpx;
	}

	/* 状态头部 */
	.status-header {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		padding: 40rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.status-badge {
		display: flex;
		align-items: center;
		gap: 8rpx;
		padding: 12rpx 24rpx;
		border-radius: 60rpx;
		background: rgba(255, 255, 255, 0.25);
		backdrop-filter: blur(10rpx);

		&.status-pending {
			background: rgba(255, 143, 0, 0.9);
		}

		&.status-matched {
			background: rgba(76, 175, 80, 0.9);
		}

		&.status-closed {
			background: rgba(158, 158, 158, 0.9);
		}
	}

	.status-icon {
		font-size: 24rpx;
		color: white;
	}

	.status-text {
		font-size: 28rpx;
		font-weight: 600;
		color: white;
	}

	.publish-time {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 4rpx;
	}

	.time-label {
		font-size: 22rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	.time-value {
		font-size: 24rpx;
		color: white;
		font-weight: 500;
	}

	/* 信息卡片 */
	.info-card,
	.detail-card,
	.stats-card,
	.apply-list-card {
		background: white;
		margin: 20rpx 30rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.card-title-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
		padding-bottom: 16rpx;
		border-bottom: 2rpx solid #f0f0f0;
	}

	.card-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.subject-tag {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		font-weight: 500;
	}

	.apply-count {
		font-size: 24rpx;
		color: #ff6b35;
		font-weight: 500;
	}

	/* 信息列表 */
	.info-list {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.item-label {
		display: flex;
		align-items: center;
		gap: 8rpx;
		min-width: 180rpx;
	}

	.label-icon {
		font-size: 28rpx;
	}

	.label-text {
		font-size: 28rpx;
		color: #666;
		font-weight: 500;
	}

	.item-value {
		flex: 1;
		font-size: 28rpx;
		color: #333;
		text-align: right;
		line-height: 1.5;

		&.price {
			color: #ff6b35;
			font-weight: bold;
			font-size: 32rpx;
		}
	}

	/* 详细需求 */
	.detail-section {
		margin-bottom: 28rpx;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.section-label {
		font-size: 28rpx;
		color: #333;
		font-weight: 600;
		margin-bottom: 12rpx;
		display: block;
	}

	.section-content {
		background: #f8f8f8;
		padding: 20rpx;
		border-radius: 12rpx;
		border-left: 4rpx solid #667eea;
	}

	.content-text {
		font-size: 26rpx;
		color: #666;
		line-height: 1.8;
	}

	/* 数据统计 */
	.stats-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx;
	}

	.stat-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12rpx;
		padding: 24rpx 12rpx;
		background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
		border-radius: 16rpx;
	}

	.stat-number {
		font-size: 44rpx;
		font-weight: bold;
		color: #667eea;
	}

	.stat-label {
		font-size: 24rpx;
		color: #666;
	}

	/* 应聘老师列表 */
	.teacher-list {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.teacher-item {
		display: flex;
		align-items: center;
		gap: 16rpx;
		padding: 16rpx;
		background: #f8f8f8;
		border-radius: 12rpx;
		transition: all 0.2s;

		&:active {
			background: #f0f0f0;
		}
	}

	.teacher-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background: #e0e0e0;
		flex-shrink: 0;
	}

	.teacher-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 6rpx;
	}

	.teacher-name {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
	}

	.teacher-tags {
		font-size: 24rpx;
		color: #999;
	}

	.teacher-actions {
		display: flex;
		gap: 8rpx;
		flex-shrink: 0;
	}

	.action-btn {
		padding: 12rpx 20rpx;
		border-radius: 8rpx;
		transition: all 0.2s;

		&:active {
			transform: scale(0.95);
		}
	}

	.primary-btn {
		background: #667eea;
		color: white;
	}

	.accept-btn {
		background: #2ecc71;
		color: white;
	}

	.btn-text {
		font-size: 24rpx;
		font-weight: 500;
	}

	/* 底部操作 */
	.bottom-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: white;
		padding: 20rpx 30rpx;
		border-top: 2rpx solid #f0f0f0;
		z-index: 100;
		box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.action-buttons {
		display: flex;
		gap: 16rpx;
	}

	/* 自定义按钮样式 */
	.custom-btn {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12rpx;
		padding: 24rpx 32rpx;
		border-radius: 12rpx;
		border: 2rpx solid;
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.98);
			opacity: 0.8;
		}
	}

	.primary-btn {
		background: white;
		border-color: #667eea;

		.btn-icon {
			color: #667eea;
		}

		.btn-text {
			color: #667eea;
		}

		&:active {
			background: rgba(102, 126, 234, 0.1);
		}
	}

	.danger-btn {
		background: white;
		border-color: #f44336;

		.btn-icon {
			color: #f44336;
		}

		.btn-text {
			color: #f44336;
		}

		&:active {
			background: rgba(244, 67, 54, 0.1);
		}
	}

	.btn-icon {
		font-size: 32rpx;
	}

	.btn-text {
		font-size: 28rpx;
		font-weight: 600;
	}
</style>